@import "reset.css";
@import "../font/iconfont.css";
// html,body{
//     height: 100%;
// }
body{
    max-width: 7.5rem;
    margin: 0 auto;
    // display: flex;
    // flex-direction: column;
}
// 头部
header{
    height: 1.4rem;
    background: linear-gradient(#ff6040,#ff7e6d);
    padding-top: .43rem;

    .title{
        height: .64rem;
        display: flex;
        color: #ffdfd8;
        padding: 0 .12rem 0 .3rem;
        align-items: center;
        
        h2{
            width: 2.9rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: .3rem;
            margin: 0 .4rem 0 1.6rem;
        }

        span{
            font-size: .4rem;
        }

        p{
            width: 1.72rem;
            height: .62rem;
            border: 1px solid #ff8a6f;
            border-radius: .3rem;
            position: relative;
            display: flex;
            justify-content: space-around;
            align-items: center;

            span{
                &:nth-child(1){
                    font-size: .4rem;
                }
                &:nth-child(2){
                    font-size: .3rem;
                }
            }
            
            i{
                width: 1px;
                height: .37rem;
                background:#ff8a6f; 
                position: absolute;
                top: .12rem;
                left: .86rem;
            }
        }
    }
    nav{
        display: flex;
        width:7.5rem;
        padding: .33rem .74rem 0 .68rem;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        position: relative;

        a{
            font-size: .26rem;
            color: #fff3f2;
            &.cur{
                font-size: .3rem;
                font-weight: bold;
                color: #fff;
                &::before{
                    content: "";
                    display: block;
                    width: .4rem;
                    height: .04rem;
                    background: #fff;
                    border-radius: .03rem;
                    position: absolute;
                    left: .78rem;
                    bottom:-.03rem;
                }
            }
        }
    }
}
// 主体
main{
    // flex: 1;
    // overflow: auto;
    margin-bottom: 1.66rem;
    overflow: hidden;
    #con{
        background: #fff;
        position: relative;
        img{
            width: 7.5rem;
        }
        span{
            display: block;
            width: .48rem;
            height: .48rem;
            border-radius: .23rem;
            background: #585456;
            color: #fff;
            position: absolute;
            right: .2rem;
            top: .2rem;
            text-align: center;
            line-height: .48rem;
            font-size: .28rem;
        }   
        b{
            display: block;
            width: .8rem;
            height: .36rem;
            border-radius: .17rem;
            background: #585456;
            color: #fff;
            position: absolute;
            right: .2rem;
            top: 6.94rem;
            text-align: center;
            line-height: .36rem;
            font-size: .2rem;
        }
        .text{
            height: 2.9rem;
            padding:.2rem;
            background: #fff;
            box-sizing: border-box;
            p{
                &:nth-child(1){
                    height: .48rem;
                    font-size: .44rem;
                    color: #ff6040;
                    display: flex;
                    align-items: center;
                    strong{
                        font-size: .2rem;
                    }
                    del{
                        font-size: .2rem;
                        color: #979797;
                        margin-left: .12rem;
                    }
                    em{
                        color: #ff6343;
                        font-size: .16rem;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        margin-left: 4.35rem;
                    }
                }
                &:nth-child(2){
                    font-size: .3rem;
                    color: #333;
                    width: 7.1rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                &:nth-child(3){
                    font-size: .26rem;
                    color: #999;
                    width: 7.1rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                &:nth-child(4){
                    width: 1.66rem;
                    height: .32rem;
                    color: #fff;
                    background: #ff8066;
                    margin-top: .25rem;
                    font-size: .18rem;
                    line-height: .32rem;
                    text-align: center;
                }
                &:nth-child(5){
                    display: flex;
                    width: 7.1rem;
                    height: .4rem;
                    background: #f2f2f2;
                    margin-top:.2rem;
                    line-height: .4rem;
                    i{
                        width: 5.35rem;
                        height: .4rem;
                        color: #999;
                        font-size: .12rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-left: .1rem;

                    }
                    em{
                        color: #ff6040;
                        font-size: .12rem;
                        margin-left: .8rem;
                    }
                }
            }
        }
    }
    // 内容领劵分期
    #con2{
        background: #fff;
        margin-top: .2rem;
        .coupons{
            display: flex;
            height: .5rem;
            padding-top: .4rem;
            span{
                width: 1.08rem;
                font-size: .22rem;
                color: #333;
                text-align: center;
                font-weight: bold;
            }
            p{
                width: 6.4rem;
                border-bottom: .02rem solid #e6e6e6;
                
                img{
                    width: 2.5rem;
                }
            }
        }
        .substep{
            height: .5rem;
            padding-top: .32rem;
            span{
                float: left;
                width: 1.08rem;
                font-size: .22rem;
                color: #333;
                text-align: center;
                font-weight: bold;
            }
            p{
                width: 6.22rem;
                float: left;
                padding-right: .2rem;
                em{
                    float: left;
                    font-size: .22rem;
                    color: #676767;
                }
                b{
                    float: right;
                    font-size: .18rem;
                }
            }
        }
    }
}


// 页脚
footer{
    width: 7.5rem;
    height: 1.66rem;
    display: flex;
    border-top: 1px solid #ccc;
    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: -3.75rem;
    background: #fff;

    .front{
        width: 3.1rem;
        display: flex;
        justify-content: space-around;
        margin-top: .15rem;

        p{
            display: flex;
            flex-direction:column;
            font-size: .18rem;
            // color: #a1a1a1;
            text-align: center;

            i{
                font-size: .4rem;
                color: #333;
                font-weight: bold;
            }
            span{
                font-size: .18rem;
                color: #535353;
            }
        }
    }
    
    .after{
        width: 4.4rem;
        input{
            float: left;
            width: 2.2rem;
            height: .98rem;
            font-size: .3rem;
            text-align: center;
            line-height: .98rem;
            font-weight: bold;
            border: none;
            &:nth-child(1){
                background: #ffcc66;
                color: #663014;
            }
            &:nth-child(2){
                background: #ff6040;
                color: #fff;
            }
        }
    }
    b{
        width: .12rem;
        height: .12rem;
        border-radius: .06rem;
        background: #ff6040;
        position: absolute;
        left: 2.6rem;
        top: .2rem;
    }
}